<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  craeteRotatePlaneGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import AceEditor from "@/components/aceEditor.vue";

const htmlStr = ref(`
   <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  craeteRotatePlaneGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000)
 let positions:any= gisTools.computeEllipseEdgePositionsTurf({
    position:{"lon":113.59,"lat":34.74,"height":50},
    radius:0.8,
    steps:1080
  });
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p1.png',
    startIndex: Math.ceil((positions.length/6)*0),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p2.png',
    startIndex:Math.ceil((positions.length/6)*1),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p3.png',
    startIndex:Math.ceil((positions.length/6)*2),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p4.png',
    startIndex:Math.ceil((positions.length/6)*3),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p5.png',
    startIndex:Math.ceil((positions.length/6)*4),
    width:200,
    height:100,
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>

`);

const tsStr = ref(`
 //两个js文件
import * as Cesium from "cesium";
import defaultImage from "@/assets/img/location.png";
import {getAssetsFile} from "@/utils/utils";
   /**
 * 创建旋转面-可以在面的环上放各种图片
 * @function
 * @param {object} options
 * @param {Cartesian3} options.positions - 坐标数组 运动坐标数组 [[jd,wd],[jd,wd]]
 * @param {Cartesian2} options.width - 宽  200
 * @param {Cartesian2} options.height - 高  100
 * @param {string} options.image - 图片
 * @param {number} startIndex 开始运动的位置的索引
 */
const craeteRotatePlaneGraphics = (viewer: any, options:any) => {
    let {positions, image,startIndex} = options;
    if (!positions || positions.length === 0) {
        return;
    }
    let width = options['width'] || 200;
    let height = options['height'] || 150.0;
    let entity: any = new Cesium.Entity();
    let index = startIndex;
    let _position = positions[index];
    entity.position = new Cesium.CallbackProperty(function () {
        if (index == 0) {
            _position = positions[0];
            index += 1;
        } else if (index < positions.length - 1) {
            _position = positions[index];
            index += 1;

        } else if (index == positions.length - 1) {
            _position = positions[index];
            index = 0;
        }
        return _position;
    }, false);
    entity.plane = {
        plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
        dimensions: new Cesium.Cartesian2(width, height),
        material: new Cesium.ImageMaterialProperty({
            image: getAssetsFile(image),
        }),
    };
    return viewer.entities.add(entity);
}

/**
     * 给定中心点计算环绕的圆上的点的坐标
     * @param {object}  options
     * @param {object} options.position：中心点    eg:{"lon":113.24,"lat":21.21,"height":1}
     * @param {number} options.radius：半径   单位千米
     * @param {number} options.steps：频数  default:64
     * @return [[jd,wd],[jd,wd]]
     */
    computeEllipseEdgePositionsTurf( options:any){
        let { position,radius, steps } = options;
        if(!position){ return; };
        let center = [position['lon'],position['lat']];
        let config:any = {steps: steps, units: 'kilometers', properties: {foo: 'bar'}};
        let circleFeature =circle(center, radius, config);
        let  positionLonLat=  circleFeature.geometry.coordinates[0];
        let newArr:any=[];
        positionLonLat.forEach((item:any)=>{
            newArr.push(Cesium.Cartesian3.fromDegrees(item[0],item[1],position['height']))
        })
        return newArr;
    }

`);

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000)
 let positions:any= gisTools.computeEllipseEdgePositionsTurf({
    position:{"lon":113.59,"lat":34.74,"height":50},
    radius:0.8,
    steps:1080
  });
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p1.png',
    startIndex: Math.ceil((positions.length/6)*0),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p2.png',
    startIndex:Math.ceil((positions.length/6)*1),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p3.png',
    startIndex:Math.ceil((positions.length/6)*2),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p4.png',
    startIndex:Math.ceil((positions.length/6)*3),
    width:200,
    height:100,
  })
  craeteRotatePlaneGraphics(cViewer.value,{
    positions: positions,
    image: 'texturex/p5.png',
    startIndex:Math.ceil((positions.length/6)*4),
    width:200,
    height:100,
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
